<template>
  <div class="card">
    <div style="padding:20px; font-size: large ;font-weight: bolder">论坛空间</div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input clearable @clear="load" style="width:240px; padding-right:5px" v-model="data.title"
                :prefix-icon="Search" placeholder="请输入贴子标题查询"></el-input>
      <el-select v-model="data.form.categoryId" placeholder="请选择贴子分类" @clear="load"
           style="width: 240px">
        <el-option
            v-for="item in data.categoryData"
            :key="item.id"
            :label="item.title"
            :value="item.id"
        />
      </el-select>
      <el-button type="primary" @click="load" style="margin-left: 10px">查 询</el-button>
      <el-button type="danger" @click="reset">重 置</el-button>
    </div>
    <el-table :data="data.tableData" border style="width: 100%"
              :header-cell-style="{ color:'#333', backgroundColor:'#fff',}" >
      <el-table-column type="index" label="索引" width="60px" />
      <el-table-column prop="image" label="封面" width="100px" >
        <template #default="scope">
          <el-image v-if="scope.row.img" :src="scope.row.img" :preview-src-list="[scope.row.img]" :preview-teleported="true"
                    style="width:40px; height:40px; border-radius:5px; display:block"/>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="贴子标题"  />
      <el-table-column prop="categoryTitle" label="贴子分类"  />
      <el-table-column prop="userName" label="贴主"  >
        <template #default="scope">
          <span
              class="clickable-text"
              @click="handleUserClick(scope.row)"
          >
            {{ scope.row.userName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="贴子内容">
        <template v-slot="scope">
          <el-button type="primary" @click="viewAll(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="贴子时间"  />
    </el-table>
    <div>
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20]"
          :total="data.total"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
      />
    </div>
    <!--查看详情-->
    <el-dialog v-model="data.viewVisible" width="60%" destroy-on-close >
      <div v-html="data.title" style="border-left:1px; margin-bottom:50px; width:100%; font-size:large; color:black; font-weight:bolder"></div>
      <el-image :src="data.img" />
      <div style="border-left:1px; font-weight: bolder; margin-top:30px; color:blue">贴子内容</div>
      <div v-html="data.content" style="margin:20px; width:60%"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.js";

const formRef = ref()

const data = reactive({
  user:JSON.parse(localStorage.getItem('code_user') || '{}'),
  pageNum: 1,
  pageSize: 5,
  total: 0,
  tableData: [],
  content:null,
  viewVisible: false,
  formVisible: false,
  form: {},
  title: null,
  status: null,
  img: null,
  categoryId: null,
  rules: {
    comment:[{min:1, message: "评论不能为空", trigger: "blur"}],
  },
  categoryData:[],
  writtenData:[],
})

const load = () => {
  request.get("/written/selectByStatus", {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      title: data.title,
      categoryId: data.form.categoryId
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data?.list;
      data.total = res.data?.total;
    }else{
      ElMessage.error(res.msg)
    }
  })
}
load()

const reset = () => {
  data.title = null
  data.form.categoryId = null
  load()
}

const handlePageChange = (newPageNum) => {
  data.pageNum = newPageNum;
  load()
}

const handleSizeChange = (newPageSize) => {
  data.pageSize = newPageSize
  data.pageNum = 1;
  load()
}

const handleUserClick = (row) => {
  const userId = String(row.userId)
  router.push({ path: `/manager/otherperson/${userId}`})
}

const viewAll = (row) => {
  data.title = row.title;
  data.img = row.img;
  data.content = row.content
  data.id = row.id
  data.viewVisible = true
}

const loadCategory = () => {
  request.get('/category/selectAll').then(res => {
    if (res.code === '200') {
      data.categoryData = res.data
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadCategory()
</script>

<style>
.clickable-text {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.clickable-text:hover {
  color: #3375b9;
}
</style>